<template>
	<div class="slot-table">
		<vxe-grid 
		:seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
		:pager-config="tablePage" 
		:form-config="tableForm" 
		:data="tableData" 
		:columns="tableColumn" 
		max-height="500" 
		border highlight-hover-row 
		@cell-click="cellClickEvent" 
		row-class-name="my-row" 
		@form-submit="findList" 
		/>
	</div>
</template>

<script>
export default {
	name: "SlotGrid",
	props:{
		config:{
			type:Object,
			default:{}
		}
	},
	data() {
		return {
			tableForm: null,
			tableData: null,
			tableColumn: null,
			tablePage: {
				total: 100,
				currentPage: 1,
				pageSize: 4,
				align: "center",
				pageSizes: [10, 20, 50, 100, 200, 500],
				layouts: ["Sizes", "PrevJump", "PrevPage", "Number", "NextPage", "NextJump", "FullJump", "Total"],
				perfect: true,
			},
		};
	},
	created() {
		if (this.config) {
			this.tableForm = this.config.tableForm;
			this.tableData = this.config.tableData;
			this.tableColumn = this.config.tableColumn;
		}
	},
	watch: {
		"config.tableData": function (newVal) {
		  this.tableData = newVal;
		},
		"config.tableForm": function (newVal) {
		   this.config.tableForm = newVal;
		},
	},
	methods: {
		/**
		 * 查找表格数据
		 */
		async findList() {
			this.$emit("findlist", this.tableForm.data);
		},

		/**
		 * 单击单元格触发
		 */
		cellClickEvent() {
			this.$emit("clickcell", arguments[0].row);
		},

		handlePageChange ({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.findList()
        }
	},
};
</script>

<style lang="scss" scoped>
.slot-table {
	::v-deep .myrow {
		cursor: pointer;
	}
}
</style>
